//页面初始化样式
@charset "utf-8";

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
a,
cite,
img,
sub,
sup,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    border                        : 0;
    // font                       : inherit;
    margin                        : 0;
    padding                       : 0;
    -webkit-tap-highlight-color   : rgba(0, 0, 0, 0);
    //文字禁止选中
    //-webkit-touch-callout: none; /* iOS Safari */
    //-webkit-user-selecat : none; /* Chrome/Safari/Opera */
    //-khtml-user-select   : none; /* Konqueror */
    //-moz-user-select     : none; /* Firefox */
    //-ms-user-select      : none; /* Internet Explorer/Edge */
    //user-select          : none; /* Non-prefixed version, currentlynot supported by any browser */

    -webkit-text-size-adjust: none;
}

html,
body {
    height   : 100%;
    min-width: 1200px;
    color    : $--color-text-primary;

    &::-webkit-scrollbar {
        height: 0px;
        width : 4px;
    }

    /*定义滚动条轨道 内阴影+圆角*/
    &::-webkit-scrollbar-track {
        //-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
        //border-radius     : 10px;
        background-color: rgba(0, 0, 0, 0.05);
    }

    /*定义滑块 内阴影+圆角*/
    &::-webkit-scrollbar-thumb {
        border-radius       : 0px;
        //-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.2);
        background-color    : rgba(0, 0, 0, 0.3);
        border-radius       : 5px;
    }
}


// article,
// aside,
// details,
// figcaption,
// figure,
// footer,
// header,
// hgroup,
// menu,
// nav,
// section {
//     display: block;
// }

// button {
//     outline: none;
// }

// ol,
// ul {
//     margin : 0;
//     padding: 0;
// }

ol,
ul,
li {
    list-style: none;
}

// i,
// em {
//     font-style: normal;
// }

// blockquote {
//     quotes: none;
// }

// blockquote:before,
// blockquote:after {
//     content: '';
//     content: none;
// }

a {
    outline           : none;
    text-decoration   : none;
    text-decoration   : none;
    text-decoration   : none;
    transition        : background-color .5s ease 0s, color .5s ease 0s, width .5s ease 0s, border-width .5s ease 0s, border-color .5s ease 0s;
    -webkit-transition: background-color .5s ease 0s, color .5s ease 0s, width .5s ease 0s, border-width .5s ease 0s, border-color .5s ease 0s;
    -moz-transition   : background-color .5s ease 0s, color .5s ease 0s, width .5s ease 0s, border-width .5s ease 0s, border-color .5s ease 0s;
    -ms-transition    : background-color .5s ease 0s, color .5s ease 0s, width .5s ease 0s, border-width .5s ease 0s, border-color .5s ease 0s;
    -o-transition     : background-color .5s ease 0s, color .5s ease 0s, width .5s ease 0s, border-width .5s ease 0s, border-color .5s ease 0s
}

input,
textarea {
    font-family: inherit;
    font-size  : inherit;
    color      : inherit;
    outline    : none;
    border     : 0;
    margin     : 0;
    padding    : 0;
}

select,
option {
    font-family: inherit;
}

//textarea,input,a{
//    -webkit-appearance: none;
//}


a,
a:link,
a:visited {
    text-decoration: none;
    color          : inherit;
    cursor         : pointer;
}

a:hover {
    text-decoration: none;
}

a:focus {
    outline: none;
}

textarea {
    box-shadow        : 0px 0px 0px rgba(0, 0, 0, 0);
    -webkit-appearance: none;

}



//单行超出隐藏
.text-overHide {
    overflow     : hidden;
    text-overflow: ellipsis;
    white-space  : nowrap;
}

//多行超出隐藏
.text-overHide_s_2 {
    display           : -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow          : hidden;
}

//文字禁止选中
.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select  : none;
    /* Chrome/Safari/Opera */
    -khtml-user-select   : none;
    /* Konqueror */
    -moz-user-select     : none;
    /* Firefox */
    -ms-user-select      : none;
    /* Internet Explorer/Edge */
    user-select          : none;
    /* Non-prefixed version, currentlynot supported by any browser */
}

.aAnimate {
    transition        : background 0.5s, color 0.5s;
    -moz-transition   : background 0.5s, color 0.5s;
    /* Firefox 4 */
    -webkit-transition: background 0.5s, color 0.5s;
    /* Safari 和 Chrome */
    -o-transition     : background 0.5s, color 0.5s;
    /* Opera */
}

.allAnimate {
    transition        : all 0.5s;
    -moz-transition   : all 0.5s;
    /* Firefox 4 */
    -webkit-transition: all 0.5s;
    /* Safari 和 Chrome */
    -o-transition     : all 0.5s;
    /* Opera */
}

//iOS (iPhone和iPad) 点击 黑框
.noColorIosClick {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

//文字禁止选中
.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select  : none;
    /* Chrome/Safari/Opera */
    -khtml-user-select   : none;
    /* Konqueror */
    -moz-user-select     : none;
    /* Firefox */
    -ms-user-select      : none;
    /* Internet Explorer/Edge */
    user-select          : none;
    /* Non-prefixed version, currentlynot supported by any browser */
}

.el-table--border {
    border-radius: 4px !important;
    // border:1px solid $--border-color-light;
    
    // // overflow     : hidden !important;
    // box-sizing: content-box!important;

    th{
        background: $--background-color-base!important;
        font-weight: initial;
    }
    // &.el-table--fit{
    //     border-right:1px solid $--border-color-light;
    // }
    th, td {
        border-right-width:0 !important;
    }
    td{
        // vertical-align: top!important;
    }
}

// 图片组件 
.componentsImageBox {

    .el-image__error,
    .el-image__placeholder,
    .el-image__inner {
        width : inherit !important;
        height: inherit !important;
    }
}

// 消息提醒样式重置
.customClassMessageError {
    // top          : 0px !important;
    // width        : 100% !important;
    // border-radius: 0px !important;
    background  : $--color-danger !important;
    border-width: 0px !important;
    z-index     : 10001 !important;

    .el-message__content,
    .el-icon-error {
        color: #fff !important;
    }

    .el-message__closeBtn {
        color: #fff !important;
    }
}

.customClassMessageSuccess {
    // top          : 0px !important;
    // width        : 100% !important;
    // border-radius: 0px !important;
    background  : $--color-success !important;
    border-width: 0px !important;
    z-index     : 10001 !important;

    .el-message__content,
    .el-icon-success {
        color: #fff !important;
    }

    .el-message__closeBtn {
        color: #fff !important;
    }
}

// 输入框内下拉框背景颜色
.input-with-select .el-input-group__prepend {
    background-color: #fff !important;
}

.el-table-column--selection .cell {
    padding-left: 10px !important;
}

.tabsStyleBase {
    // margin-top:14px;

    height: calc(100% - 14px) !important;

    .el-tabs__nav-wrap::after {
        height: 0px !important;
    }

    .el-tabs__header {
        margin         : 0px 14px;
        background     : #fff;
        height         : 59px;
        border-color   : $--border-color-lighter !important;
        // border-width: 0px!important;
    }

    .el-tabs__item {
        height   : 60px !important;
        padding  : 0px 20px !important;
        font-size: 16px;

        >div {
            display    : flex;
            align-items: center;
            font-weight: normal;
        }

        i {
            font-size   : 20px;
            margin-right: 10px;
        }

    }

    .el-tabs__content {

        padding: 0px;
        height : calc(100% - 59px) !important;

        .el-tab-pane {
            height    : 100%;
            overflow  : hidden;
            overflow-y: auto;
        }
    }
}

.tabsStyle {

    &.el-tabs--border-card {
        margin      : 14px;
        background  : #fff;
        height      : calc(100% - 30px) !important;
        border-width: 1px !important;
        border-color: $--border-color-lighter !important;
        box-shadow  : none !important;

        .el-tabs__header {
            background     : $--background-color-base;
            border-color   : $--border-color-lighter !important;
            // border-width: 0px!important;
        }

        .el-tabs__content {
            padding: 0px;
            height : calc(100% - 59px) !important;

            .el-tab-pane {
                height    : 100%;
                overflow  : hidden;
                overflow-y: auto;
            }
        }

        .el-tabs__item {
            height   : 60px !important;
            padding  : 10px 20px !important;
            font-size: 16px;

            >div {
                display    : flex;
                align-items: center;
                font-weight: normal;
            }

            i {
                font-size   : 20px;
                margin-right: 10px;
            }

        }

        .is-active {
            border-left-color : $--border-color-lighter !important;
            border-right-color: $--border-color-lighter !important;
            // border-width: 0px!important;
        }

    }

}

.sliderStyleMin {
    .el-slider__input {
        width: 60px !important;
    }

    .el-slider__runway.show-input {
        margin-right: 80px;
    }

    .el-input-number.is-without-controls {
        .el-input__inner {
            padding-left : 0px !important;
            padding-right: 0px !important;

        }
    }

}

// 颜色选择器 隐藏清空按钮
.colorPickerBoxStyleEmpty {
    .el-button--text {
        display: none;
    }
}

.el-textarea__inner {
    padding-bottom: 30px !important;
    min-height    : 61px !important;
    resize        : none !important;
}


.tagStyle {
    background    : #fff !important;
    height        : auto !important;
    width         : fit-content !important;
    display       : inline-flex !important;
    flex-wrap     : wrap !important;
    align-items   : center !important;
    margin        : 0px 10px 10px 0px !important;
    // line-height: 30px!important;
    font-size     : 14px !important;
    border        : 1px solid $--border-color-base !important;
    border-radius : 5px !important;
    padding       : 5px 14px 5px 14px !important;
    color         : $--color-text-primary !important;
    opacity       : .7 !important;
    transition    : all 0s !important;

    &.pointer {
        cursor : pointer !important;
        opacity: 1 !important;


        &:hover {
            transition  : all .5s !important;
            background  : $--background-color-base !important;
            border-color: $--border-color-base !important;
        }
    }

    .el-tag__close {
        display      : block !important;
        color        : $--color-text-primary !important;
        flex         : none !important;
        width        : 24px !important;
        height       : 24px !important;
        margin-top   : 2px !important;
        line-height  : 23px !important;
        text-align   : center !important;
        transition   : all .5s !important;
        border-radius: 100% !important;
        font-size    : 12px !important;
        border       : 1px solid $--border-color-lighter !important;
        box-sizing   : border-box !important;

        &:hover {
            background: $--background-color-light !important;
            border    : 1px solid $--border-color-base !important;
        }
    }


}

.radioStyleGhost {
    // margin-right:-2px;
    display    : flex !important;
    flex-wrap  : wrap;
    flex       : 0 0 25% !important;
    padding-top: 1px;


    .el-radio-button__inner {
        margin-top     : -1px;
        margin-left    : -1px;
        overflow       : hidden;
        width          : calc(100% + 1px) !important;
        padding        : 8px 10px !important;
        box-sizing     : border-box !important;
        border         : 1px solid $--border-color-base !important;
        border-width   : 1px !important;
        border-radius  : 0px !important;
        box-shadow     : none !important;
        font-weight    : normal !important;
        font-size      : 13px !important;
        display        : flex;
        justify-content: center;
    }

    .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        z-index         : 1;
        border-color    : $--color-primary !important;
        color           : $--color-primary !important;
        background-color: $--background-color-primary-light !important;
    }

    .el-radio-button {
        &:nth-child(1) {
            .el-radio-button__inner {
                border-radius: 4px 0px 0px 0px !important;
            }
        }

        &:nth-last-child(1) {
            .el-radio-button__inner {
                border-radius: 0px 0px 4px 0px !important;
            }
        }
    }

    &.s2 {
        .el-radio-button {
            width: calc(100% / 2) !important;
        }
    }

    &.s3 {
        .el-radio-button {
            width: calc(100% / 3) !important;
        }
    }

    &.s4 {
        .el-radio-button {
            width: calc(100% / 4) !important;
        }
    }

    &.s5 {
        .el-radio-button {
            width: calc(100% / 5) !important;
        }
    }

    &.s6 {
        .el-radio-button {
            width: calc(100% / 6) !important;
        }
    }

    &.s7 {
        .el-radio-button {
            width: calc(100% / 7) !important;
        }
    }

    &.s8 {
        .el-radio-button {
            width: calc(100% / 8) !important;
        }
    }

    &.s9 {
        .el-radio-button {
            width: calc(100% / 9) !important;
        }
    }

    &.s10 {
        .el-radio-button {
            width: calc(100% / 10) !important;
        }
    }
}




.paginationStyle.el-pagination.is-background .btn-next,
.paginationStyle.el-pagination.is-background .btn-prev,
.paginationStyle.el-pagination.is-background .el-pager li {
    background-color: #fff !important;
    border          : 1px solid $--border-color-lighter;
    border-radius   : 4px;
    line-height     : 26px;
}

.paginationStyle.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: $--color-primary !important;
}

.dialogStyleBase.el-dialog__wrapper {
    display        : flex;
    justify-content: center;
    align-items    : center;

    .el-dialog {
        margin    : 0px auto !important;
        background: $--background-color-base;

        .el-dialog__header {
            padding-bottom: 20px;
            border-bottom : 1px solid $--border-color-extra-light;
            border-bottom : 1px solid $--border-color-lighter;

            // background: $--background-color-base;
            .el-dialog__headerbtn {
                margin-top: 4px;
            }
        }

        .el-dialog__body {
            background   : $--background-color-base;
            background   : #fff;
            max-height   : calc(100vh - 160px) !important;
            overflow     : hidden;
            overflow-y   : auto;
            padding      : 0px !important;
            // margin    : 10px 0px 20px 0px;
        }

        .dialogStyleBaseBox {
            padding: 20px;

            .LayoutCell {
                padding: 0px !important;
            }
        }
    }

    .el-dialog__footer {
        background: $--background-color-base;
        border-top: 1px solid $--border-color-extra-light;
        border-top: 1px solid $--border-color-lighter;
        padding   : 15px 20px !important;
    }

    &.maxHeight {
        .el-dialog {


            .el-dialog__body {

                height: calc(100vh - 160px) !important;
            }


        }
    }

    .LayoutEditFormBox {
        padding: 0px !important;
        height : 100% !important;
    }

}

.el-dialog__body {
    color: $--color-text-primary !important;
}


.el-form {
    .el-form-item {
        &:last-of-type {
            margin-right: 0px;
        }
    }
}


.el-checkbox {
    .el-checkbox__label {
        font-weight: initial !important;
    }

    .el-checkbox__input.is-checked+.el-checkbox__label {
        color: $--color-text-primary !important;
    }
}

.el-radio {
    .el-radio__label {
        font-weight: initial !important;
    }

    .el-radio__input.is-checked+.el-radio__label {
        color: $--color-text-primary !important;
    }
}

.formStyleMini {
    .el-form-item {
        margin-bottom: 10px;
    }

    .el-form-item__label {
        font-size: 12px !important;
    }

    .el-form-item__content {
        height: 28px;
    }
}

// .el-form-item__label{
//     font-size: 12px !important;
// }


.v-modal {
    opacity: .7 !important;
}